<!--
 * Description: FD Pie
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/09/18 10:10
-->
<template>
  <div ref="fd-pie" class="fd-pie"></div>
</template>
<script>
const echarts = require('echarts')
export default {
  name: 'FdPie',
  props: {
    fdData: {
      type: Object,
      default: () => {}
    },
    fdColor: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => this.dragPie())
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.chartResize)
  },
  methods: {
    dragPie() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$refs['fd-pie'])

      const pieData = [
        { value: this.fdData.fdAppoint, name: '待指派', keyName: 'fdAppoint' },
        { value: this.fdData.fdRecieve, name: '待接收', keyName: 'fdRecieve' },
        { value: this.fdData.fdReject, name: '已驳回', keyName: 'fdReject' },
        { value: this.fdData.fdAssign, name: '待分配', keyName: 'fdAssign' },
        { value: this.fdData.fdCostAssign, name: '估价待分配', keyName: 'fdCostAssign' },
        { value: this.fdData.fdCost, name: '待估价', keyName: 'fdCost' },
        { value: this.fdData.fdApprove, name: '待审批', keyName: 'fdApprove' },
        { value: this.fdData.fdFile, name: '待报价', keyName: 'fdFile' }
      ]

      // 绘制图表
      this.chart.setOption({
        tooltip: {},
        grid: {
          left: 40,
          right: 20
        },
        series: [
          {
            name: 'FD待办数量',
            type: 'pie',
            radius: '75%',
            itemStyle: {
              color: params => {
                return this.fdColor[params.data.keyName]
              }
            },
            data: pieData.filter(item => item.value > 0)
          }
        ]
      })

      window.addEventListener('resize', () => {
        this.chartResize()
      })

      this.chart.on('click', { seriesIndex: 0 }, data => {
        switch (data.data.keyName) {
          // 待指派
          case 'fdAppoint':
            this.$router.push('/FdAppoint')
            break
          // 待审批
          case 'fdApprove':
            this.$router.push('/FdApprove')
            break
          // 待分配
          case 'fdAssign':
            this.$router.push('/FdAssign')
            break
          // 待估价
          case 'fdCost':
            this.$router.push('/FdEvaluationTask')
            break
          // 估价待分配
          case 'fdCostAssign':
            this.$router.push('/FdApprove')
            break
          // 待报价
          case 'fdFile':
            this.$router.push('/FdQuote')
            break
          // 待接收
          case 'fdRecieve':
            this.$router.push('/FdReceive')
            break
          // 已驳回
          default:
            this.$router.push('/FdReject')
            break
        }
      })
    },
    chartResize() {
      this.$debounce(
        () => {
          this.chart.resize()
        },
        1000,
        this
      )()
    }
  }
}
</script>
